<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
 	<head th:include="commom/_meta::copy">
 		<title>Home page</title>
 	</head>
  	<body>
  		<div th:include="commom/_header::copy" id="header"></div>
  		<div th:include="commom/_menu::copy" id="sidebar"></div>
  		<div th:include="commom/_right::copy" id="right-sidebar" class="hide-sidebar"></div>
        <div id="content">
            <!-- Start .content-wrapper -->
            <div class="content-wrapper">
                <div class="row">
                    <!-- Start .row -->
                    <!-- Start .page-header -->
                    <div class="col-lg-12 heading">
                        <h1 class="page-header"><i class="ec-user"></i> Profile</h1>
                        <!-- Start .bredcrumb -->
                        <ul id="crumb" class="breadcrumb">
                        </ul>
                        <!-- End .breadcrumb -->
                        <!-- Start .option-buttons -->
                        <div class="option-buttons">
                            <div class="btn-toolbar" role="toolbar">
                                <div class="btn-group">
                                    <a id="clear-localstorage" class="btn tip" title="Reset panels position">
                                        <i class="ec-refresh color-red s24"></i>
                                    </a>
                                </div>
                                <div class="btn-group dropdown">
                                    <a class="btn dropdown-toggle" data-toggle="dropdown" id="dropdownMenu1"><i class="br-grid s24"></i></a>
                                    <div class="dropdown-menu pull-right" role="menu" aria-labelledby="dropdownMenu1">
                                        <div class="option-dropdown">
                                            <div class="shortcut-button">
                                                <a href="#">
                                                    <i class="im-pie"></i>
                                                    <span>Earning Stats</span>
                                                </a>
                                            </div>
                                            <div class="shortcut-button">
                                                <a href="#">
                                                    <i class="ec-images color-dark"></i>
                                                    <span>Gallery</span>
                                                </a>
                                            </div>
                                            <div class="shortcut-button">
                                                <a href="#">
                                                    <i class="en-light-bulb color-orange"></i>
                                                    <span>Fresh ideas</span>
                                                </a>
                                            </div>
                                            <div class="shortcut-button">
                                                <a href="#">
                                                    <i class="ec-link color-blue"></i>
                                                    <span>Links</span>
                                                </a>
                                            </div>
                                            <div class="shortcut-button">
                                                <a href="#">
                                                    <i class="ec-support color-red"></i>
                                                    <span>Support</span>
                                                </a>
                                            </div>
                                            <div class="shortcut-button">
                                                <a href="#">
                                                    <i class="st-lock color-teal"></i>
                                                    <span>Lock area</span>
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="btn-group dropdown">
                                    <a class="btn dropdown-toggle" data-toggle="dropdown" id="dropdownMenu2"><i class="ec-pencil s24"></i></a> 
                                    <div class="dropdown-menu pull-right" role="menu" aria-labelledby="dropdownMenu2">
                                        <div class="option-dropdown">
                                            <div class="row">
                                                <p class="col-lg-12">Quick post</p>
                                                <form class="form-horizontal" role="form">
                                                    <div class="form-group">
                                                        <div class="col-lg-12">
                                                            <input type="text" class="form-control" placeholder="Enter title">
                                                        </div>
                                                    </div>
                                                    <!-- End .form-group  -->
                                                    <div class="form-group">
                                                        <div class="col-lg-12">
                                                            <textarea class="form-control wysiwyg" placeholder="Enter text"></textarea>
                                                        </div>
                                                    </div>
                                                    <!-- End .form-group  -->
                                                    <div class="form-group">
                                                        <div class="col-lg-12">
                                                            <input type="text" class="form-control tags1" placeholder="Enter tags">
                                                        </div>
                                                    </div>
                                                    <!-- End .form-group  -->
                                                    <div class="form-group">
                                                        <div class="col-lg-12">
                                                            <button class="btn btn-default btn-xs">Save Draft</button>
                                                            <button class="btn btn-success btn-xs pull-right">Publish</button>
                                                        </div>
                                                    </div>
                                                    <!-- End .form-group  -->
                                                </form>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="btn-group">
                                    <a class="btn dropdown-toggle" data-toggle="dropdown" id="dropdownMenu3"><i class="ec-help s24"></i></a>
                                    <div class="dropdown-menu pull-right" role="menu" aria-labelledby="dropdownMenu3">
                                        <div class="option-dropdown">
                                            <p>First time visitor ? <a href="#" id="app-tour" class="btn btn-success ml15">Take app tour</a> 
                                            </p>
                                            <hr>
                                            <p>Or check the <a href="#" class="btn btn-danger ml15">FAQ</a>
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- End .option-buttons -->
                    </div>
                    <!-- End .page-header -->
                </div>
                <!-- End .row -->
                <div class="outlet">
                    <!-- Start .outlet -->
                    <!-- Page start here ( usual with .row ) -->
                    <div class="row">
                        <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                            <!-- col-lg-4 start here -->
                            <div class="panel panel-default plain profile-widget">
                                <!-- Start .panel -->
                                <div class="panel-heading white-bg pl0 pr0">
                                    <img class="profile-image img-responsive" src="img/profile-cover.jpg" alt="profile cover">
                                </div>
                                <div class="panel-body">
                                    <div class="col-lg-4 col-md-4 col-sm-12">
                                        <div class="profile-avatar">
                                            <img class="img-responsive" src="img/avatars/132.jpg" alt="@roybarberuk">
                                        </div>
                                    </div>
                                    <div class="col-lg-8 col-md-8 col-sm-12">
                                        <div class="profile-name">
                                            <span th:text="${user.username}"></span> <span class="label label-success">admin</span>
                                        </div>
                                        <div class="profile-quote">
                                            <p>Building new app with yeoman generator plus grunt and bower, it`s awesome</p>
                                        </div>
                                        <div class="profile-stats-info">
                                            <a href="#" class="tipB" title="Views"><i class="im-eye2"></i> <strong>5600</strong></a>
                                            <a href="#" class="tipB" title="Comments"><i class="im-bubble"></i> <strong>75</strong></a>
                                            <a href="#" class="tipB" title="Likes"><i class="im-heart"></i> <strong>45</strong></a>
                                        </div>
                                    </div>
                                </div>
                                <div class="panel-footer white-bg">
                                    <ul class="profile-info">
                                        <li><i class="ec-mobile"></i> <span th:text="${user.phone}">+234 345 887</span></li>
                                        <li><i class="ec-location"></i> <span th:text="${user.address}">+234 345 887</span></li>
                                        <li><i class="ec-mail"></i> <span th:text="${user.email}">+234 345 887</span></li>
                                        <li><i class="im-office"></i> <span th:text="${user.occupation}">+234 345 887</span></li>
                                        <li><i class="fa-bitbucket"></i> wcandhy.xin</li>
                                    </ul>
                                </div>
                            </div>
                            <!-- End .panel -->
                        </div>
                        <!-- col-lg-4 end here -->
                        <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                            <!-- col-lg-4 start here -->
                            <div class="panel panel-default plain">
                                <!-- Start .panel -->
                                <div class="panel-heading white-bg">
                                    <h4 class="panel-title"><i class="ec-user"></i> Update info</h4>
                                </div>
                                <div class="panel-body">
                                    <form class="form-vertical hover-stripped" role="form" id="updateForm">
                                        <div class="form-group">
                                            <label class="control-label">Username</label>
                                            <input type="text" class="form-control" name="username" th:value="${user.username}" >
                                        </div>
                                        <div class="form-group">
                                            <label class="control-label">Full name</label>
                                            <input type="text" class="form-control" name="truename" th:value="${user.truename}">
                                        </div>
                                        <div class="form-group">
                                            <label class="control-label">Email</label>
                                            <input type="email" class="form-control" name="email" th:value="${user.email}">
                                        </div>
                                        <div class="form-group">
                                            <label class="control-label">Phone</label>
                                            <input type="text" class="form-control" name="phone" th:value="${user.phone}">
                                        </div>
                                         <div class="form-group">
                                            <label class="control-label">Occupation</label>
                                            <input type="text" class="form-control" name="occupation" th:value="${user.occupation}">
                                        </div>
                                         <div class="form-group">
                                            <label class="control-label">Address</label>
                                            <input type="text" class="form-control" name="address" th:value="${user.address}">
                                        </div>
                                        <div class="form-group">
                                            <label class="control-label">BirthDay</label>
                                            <div class="input-group">
                                                <input class="form-control datetime-picker2" type="text" name="birth" th:value="${user.birth}">
                                                <span class="input-group-addon"><i class="fa-calendar"></i></span>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="control-label">More info</label>
                                            <textarea class="form-control" rows="3" name="describtion"></textarea>
                                            <a href="javascript:void(0);" class="help-block color-red" data-toggle="modal" data-target="#pwdModal">Change password ?</a> 
                                        </div>
                                        <div class="form-group">
                                            <label class="control-label">Verification Code</label>
                                            <input type="text" class="form-control mb5" name="code" id="code" placeholder="Please input verification code" onblur="checkCode(this.value)" />
                                            <img id="imageCode" onclick="getCode()"><span id="codeTip" class="ml15"></span>
                                 		</div>
                                        <!-- End .form-group  -->
                                        <div class="form-group mb15">
                                            <button class="btn btn-primary" onclick="updateUser()" type="button">Change</button>
                                        </div>
                                        <!-- End .form-group  -->
                                    </form>
                                </div>
                                
                                <!-- Modal -->
                                        <div class="modal fade" id="pwdModal" tabindex="-1" role="dialog" aria-hidden="true">
                                        <div class="modal-dialog">
                                            <div class="modal-content">
                                                <div class="modal-header">
                                                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                                                    <h4 class="modal-title" id="myModalLabel">PASSWORD CHANGE</h4>
                                                </div>
                                                <div class="modal-body">
													<form id="password" class="form-horizontal form-wizard" role="form">
														<div class="msg"></div>
														<div class="wizard-steps"></div>
														<div class="step" id="first3">
															<span data-icon="ec-user"
																data-text="Personal information"></span>
															<div class="form-group">
																<label class="col-lg-3 control-label">First Name</label>
																<div class="col-lg-9">
																	<input class="form-control" name="firstname"
																		type="text">
																</div>
															</div>
															<!-- End .control-group  -->
															<div class="form-group">
																<label class="col-lg-3 control-label">Last Name</label>
																<div class="col-lg-9">
																	<input class="form-control" name="lastname" type="text">
																</div>
															</div>
															<!-- End .control-group  -->
														</div>
														<div class="step" id="personal3">
															<span data-icon="fa-envelope"
																data-text="Contact information"></span>
															<div class="form-group">
																<label class="col-lg-3 control-label">Email</label>
																<div class="col-lg-9">
																	<input class="form-control" name="email" type="email">
																</div>
															</div>
															<!-- End .control-group  -->
															<div class="form-group">
																<label class="col-lg-3 control-label">Phone
																	number</label>
																<div class="col-lg-9">
																	<input class="form-control" name="phone" type="text">
																</div>
															</div>
															<!-- End .control-group  -->
														</div>
														<div class="step submit_step" id="account3">
															<span data-icon="ec-unlocked"
																data-text="Account information"></span>
															<div class="form-group">
																<label class="col-lg-3 control-label">Username</label>
																<div class="col-lg-9">
																	<input class="form-control" name="username" type="text">
																</div>
															</div>
															<!-- End .control-group  -->
															<div class="form-group">
																<label class="col-lg-3 control-label">Password</label>
																<div class="col-lg-9">
																	<input class="form-control" name="password"
																		type="password" id="#password">
																</div>
															</div>
															<!-- End .control-group  -->
															<div class="form-group">
																<label class="col-lg-3 control-label">Re-type
																	password</label>
																<div class="col-lg-9">
																	<input class="form-control" name="password_2"
																		type="password">
																</div>
															</div>
															<!-- End .control-group  -->
														</div>
														<div class="wizard-actions">
															<button class="btn pull-left" type="reset">
																<i class="en-arrow-left5"></i>Back
															</button>
															<button class="btn pull-right" type="submit">
																Next<i class="en-arrow-right5"></i>
															</button>
														</div>
													</form>
												</div>
                                            </div>
                                            <!-- /.modal-content -->
                                        </div>
                                        <!-- /.modal-dialog -->
                                    </div>
                            </div>
                            <!-- End .panel -->
                        </div>
                        <!-- col-lg-4 end here -->
                    </div>
                    <!-- Page End here -->
                </div>
                <!-- End .outlet -->
            </div>
            <!-- End .content-wrapper -->
            <div class="clearfix"></div>
        </div>
       <div th:replace="commom/_footer::copy"></div>
       <script src="plugins/forms/datetimepicker/bootstrap-datetimepicker.min.js"></script>
       <script src="plugins/forms/validation/jquery.validate.js"></script>
       <script src="plugins/forms/wizard/jquery.form.js"></script>
	   <script src="plugins/forms/wizard/jquery.form.wizard.js"></script>
       <script type="text/javascript" src="/layer/layer.js"></script>
       <script src="js/pages/profile.js"></script>
    </body>
</html>